<template>
  <div class="container">
    <div id="vue-three"></div>
  </div>
</template>

<script>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'
// import initDraw from './initDraw.js'

export default {
  data () {
    return {}
  },
  components: {},
  methods: {
    //构建虚拟场景
    initThree () {
      //场景
      // initDraw.initScene();
      var scene = new THREE.Scene()

      // 透视相机(// 30:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000：远裁截面)
      var camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 2000)
      // camera.position.z = 5//position：相机位置xyz坐标：200, 200, 200
      camera.position.set(2, 2, 60)
      camera.up.set(0, 0, 1)//坐标朝向
      camera.lookAt(new THREE.Vector3(0, 0, 0))

      // 渲染器
      var renderer = new THREE.WebGLRenderer()
      renderer.setPixelRatio(window.devicePixelRatio)
      renderer.setSize(window.innerWidth, window.innerHeight)
      let dom = document.getElementById('vue-three')
      dom.appendChild(renderer.domElement)//添加进页面

      // AxesHelper：辅助观察的坐标系
      const axesHelper = new THREE.AxesHelper(10)
      scene.add(axesHelper)

      // 创建用于划分空间的线段
      const lineMaterial = new THREE.LineBasicMaterial({color: 0xFFED4A})
      const geometryLine = new THREE.BufferGeometry().setFromPoints(
        [
          // new THREE.Vector3(-20, 0, 0), // 表示 X 轴负方向上距离原点 1 个单位的点。
          // new THREE.Vector3(20, 0, 0), // 表示 X 轴正方向上距离原点 1 个单位的点。
          // new THREE.Vector3(0, -20, 0), // 表示 Y 轴负方向上距离原点 1 个单位的点。
          // new THREE.Vector3(0, 20, 0), // 表示 Y 轴正方向上距离原点 1 个单位的点。
          // new THREE.Vector3(0, 0, -20), // 表示 Z 轴负方向上距离原点 1 个单位的点。
          // new THREE.Vector3(0, 0, 20) // 表示 Z 轴正方向上距离原点 1 个单位的点。
        ]
      )
      const lines = new THREE.LineSegments(geometryLine, lineMaterial)
      scene.add(lines)

      //网格线绘制
      var grid = new THREE.GridHelper(60, 60, 0xFF0000, 0x444444)
      grid.material.opacity = 0.4
      grid.material.transparent = true
      grid.rotation.x = Math.PI / 2.0
      scene.add(grid)
      // 创建中心四个面
      const planeMaterial1 = new THREE.MeshBasicMaterial({
        color: 0x1abc9c,
        side: THREE.DoubleSide,
        transparent: true,//开启透明
        opacity: 0.3,//设置透明度
      })
      const planeMaterial2 = new THREE.MeshBasicMaterial({
        color: 0xff7f50,
        side: THREE.DoubleSide,
        transparent: true,//开启透明
        opacity: 0.3,//设置透明度
      })
      const planeMaterial3 = new THREE.MeshBasicMaterial({
        color: 0x74b9ff,
        side: THREE.DoubleSide,
        transparent: true,//开启透明
        opacity: 0.3,//设置透明度
      })
      const planeGeometry = new THREE.PlaneGeometry(20, 20)
      const planes = [
        new THREE.Mesh(planeGeometry, planeMaterial1).rotateX(Math.PI / 2),
        new THREE.Mesh(planeGeometry, planeMaterial2).rotateY(Math.PI / 2),
        new THREE.Mesh(planeGeometry, planeMaterial3).rotateZ(Math.PI / 2)
      ]
      planes.forEach(plane => scene.add(plane))
      // 材质
      const material = new THREE.MeshBasicMaterial({
        color: 0x0000ff, //设置材质颜色
        transparent: true,//开启透明
        opacity: 0.5,//设置透明度
      })

      // 设置几何体长宽高，也就是x、y、z三个方向的尺寸
      //对比三个参数分别对应xyz轴哪个方向
      var geometry = new THREE.BoxGeometry(2, 2, 2)

      //点光源：两个参数分别表示光源颜色和光照强度
      // 参数1：0xffffff是纯白光,表示光源颜色
      // 参数2：1.0,表示光照强度，可以根据需要调整
      const pointLight = new THREE.PointLight(0xffffff, 1.0)
      pointLight.decay = 0.0//设置光源不随距离衰减
      pointLight.position.set(400, 200, 300) //点光源放在x轴上
      scene.add(pointLight)

      // 物体
      var cube = new THREE.Mesh(geometry, material)
      cube.position.set(2, 2, 2)// 物体位置偏移
      scene.add(cube)

      //添加轨道控制器
      const controls = new OrbitControls(camera, renderer.domElement)
      controls.enableDamping = false//设置阻尼惯性
      // controls.dampingFactor = 1//设置阻尼系数
      controls.autoRotate = false//开启坐标轴自动旋转

      //为了使场景动起来，我们需要创建一个渲染循环，不断更新场景并重新渲染
      function animate () {
        //更新轨道控制器
        controls.update()
        //
        // cube.rotation.x += 0.01
        // cube.rotation.y += 0.01
        renderer.render(scene, camera)
        requestAnimationFrame(animate)
      }

      animate()
    },

  },
  mounted () {
    this.initThree()
  }

}
</script>
<style scoped>
.container {
  width: 100%;
  height: 100%;
}

#vue-three {
  position: relative;
}
</style>


